#條件判斷

$primary-color: #3498db;
$secondary-color: #2ecc71;
$contrast-threshold: 60%;

@mixin apply-color($bg-color) {
    @if (lightness($bg-color) > $contrast-threshold) { 
        color: black;
    } @else {
        color: white;
    }
    background-color: $bg-color; 
}

.button {
    @include apply-color($primary-color); 
}

.alert {
    @include apply-color($secondary-color); 
}

這邊我定義了三個變數，包含主要顏色($primary-color)、次要顏色($secondary-color)和($contrast-threshold)用作條件判斷門檻值。這邊我還使用了一個Mixin，去接收背景顏色值，再利用lightness()函數偵測亮度，去做亮度比較，若是亮度超過門檻值，文字將會設置為白色，否則設置為黑色。最後兩部分為.button和.alert應用了不同的背景，並自動根據被景色的亮度調整文字顏色。
#最終產生的CSS

.button {
    color: white;
    background-color: #3498db;
}

.alert {
    color: black;
    background-color: #2ecc71;
}

這就是今天練習的條件判斷程式碼的操作，歡迎指證錯誤。
加油!!!